<template>
  <div class="page page_mine w100 h100 radius8">
    <div class="mineInfo">
      <div class="photograph"></div>
      <div class="introduction">
        <h4 class="name">袁宏星</h4>
        <p>你好，我是袁宏星</p>
        <p>今年28岁</p>
        <p>前端工程师</p>
        <p>练习时长五年</p>
        <p>手机：18788821330</p>
        <p>邮箱：yhx_emails@163.com</p>
        <p>座右铭：向阳而生</p>
      </div>
      <div class="toMessage" @click="$router.push('/message')">给我留言</div>
    </div>
    <div class="myChart" ref="myChart"></div>
  </div>
</template>

<script>
import * as echarts from "echarts"
import china from "@/assets/china.json"

export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: "Mine",
  props: {},
  components: {},
  emit: [],
  data() {
    return {
      mapData: [
        { name: "北京", value: 2 },
        { name: "天津", value: 0 },
        { name: "河北", value: 0 },
        { name: "山西", value: 0 },
        { name: "内蒙古", value: 0 },
        { name: "辽宁", value: 0 },
        { name: "吉林", value: 0 },
        { name: "黑龙江", value: 0 },
        {
          name: "上海",
          value: 1,
          area: ["浦东", "黄浦", "徐汇", "普陀", "静安"]
        },
        { name: "江苏", value: 1, area: ["南京", "苏州", "扬州"] },
        { name: "浙江", value: 1, area: ["杭州", "宁波"] },
        {
          name: "安徽",
          value: 1,
          area: ["六安", "合肥", "安庆", "黄山", "马鞍山", "芜湖", "宣城"]
        },
        { name: "福建", value: 1, area: ["厦门"] },
        { name: "江西", value: 0 },
        { name: "山东", value: 0 },
        { name: "河南", value: 0 },
        { name: "湖北", value: 0 },
        { name: "湖南", value: 0 },
        { name: "重庆", value: 0 },
        { name: "四川", value: 2 },
        { name: "贵州", value: 2 },
        { name: "云南", value: 0 },
        { name: "西藏", value: 0 },
        { name: "陕西", value: 0 },
        { name: "甘肃", value: 2 },
        { name: "青海", value: 2 },
        { name: "宁夏", value: 0 },
        { name: "新疆", value: 0 },
        { name: "广东", value: 1, area: ["潮汕"] },
        { name: "广西", value: 0 },
        { name: "海南", value: 0 },
        { name: "香港", value: 2 },
        { name: "澳门", value: 2 },
        { name: "台湾", value: 2 }
      ],
      lineDate: [
        {
          coords: [
            [119.9, 32.3],
            [116.41, 40.21]
          ]
        },
        {
          coords: [
            [119.9, 32.3],
            [103.55, 30.65]
          ]
        },
        {
          coords: [
            [119.9, 32.3],
            [106.71, 26.56]
          ]
        },
        {
          coords: [
            [119.9, 32.3],
            [103.4, 36.03]
          ]
        },
        {
          coords: [
            [119.9, 32.3],
            [96.75, 36.56]
          ]
        },
        {
          coords: [
            [119.9, 32.3],
            [121.3, 25.03]
          ]
        },
        {
          coords: [
            [119.9, 32.3],
            [114.1, 22.2]
          ]
        },
        {
          coords: [
            [119.9, 32.3],
            [113.5, 22.2]
          ]
        }
      ],
      planePath:
        "path://M1705.06,1318.313v-89.254l-319.9-221.799l0.073-208.063c0.521-84.662-26.629-121.796-63.961-121.491c-37.332-0.305-64.482,36.829-63.961,121.491l0.073,208.063l-319.9,221.799v89.254l330.343-157.288l12.238,241.308l-134.449,92.931l0.531,42.034l175.125-42.917l175.125,42.917l0.531-42.034l-134.449-92.931l12.238-241.308L1705.06,1318.313z"
    }
  },
  computed: {},
  watch: {},
  methods: {
    init() {
      const myChart = echarts.init(this.$refs.myChart)

      const effectScatterData = [
        {
          name: "安徽",
          value: [117.5, 31.15],
          itemStyle: { color: "#fff" }
        },
        {
          name: "上海",
          value: [121.5, 31.14],
          itemStyle: { color: "#fff" }
        },
        {
          name: "江苏",
          value: [119.9, 32.3],
          itemStyle: { color: "#fff" }
        },
        {
          name: "浙江",
          value: [120.35, 28.6],
          itemStyle: { color: "#fff" }
        }
      ]

      const option = {
        backgroundColor: "#e4e4e4",
        // backgroundColor: "#000",
        tooltip: {
          // position: function (p) {  //其中p为当前鼠标的位置
          //   return [p[0] + 10, p[1] - 10]
          // },
          triggerOn: "mousemove|click",
          formatter: (e) => {
            const area = this.mapData.filter((o) => {
              return e.name === o.name
            })
            if (area[0]?.value === 1) {
              return `<div style='padding-bottom:8px;border-bottom:1px solid #999'>${
                e.name
              }：<span style='color:#67c23a'>曾经去过</span></div>
                <div style='margin-top:8px'>${area[0].area.join("，")}</div>
                `
            } else if (area[0]?.value === 2) {
              return `<div>${e.name}：<span style='color:#f56c6c'>想去</span></div>
                `
            } else {
              return `<div>${e.name}：<span style='color:#00336c'>未曾去过</span></div>`
            }
          }
        },
        visualMap: [
          {
            left: 90,
            bottom: 70,
            show: true,
            realtime: false,
            calculable: false,
            seriesIndex: [0],
            orient: "horizontal",
            pieces: [
              {
                value: 0,
                label: "未曾去过",
                color: "#00336c"
              },
              {
                value: 1,
                label: "曾经去过",
                color: "#67c23a"
              },
              {
                value: 2,
                label: "想去",
                color: "#f56c6c"
              }
            ]
          }
        ],
        title: [
          {
            top: 40,
            text: "我的足迹",
            left: "50%",
            show: true,
            textStyle: {
              fontSize: "16px",
              color: "#666"
            }
          }
        ],
        // 地图配置
        geo: {
          show: true,
          map: "china",
          // 图形上的文本标签样式设置
          label: {
            normal: {
              show: true,
              color: "#fff"
            },
            emphasis: {
              color: "#fff",
              fontSize: 14,
              show: true
            }
          },
          // 地图区域的样式设置
          itemStyle: {
            normal: {
              borderWidth: 1, // 区域边框宽度
              borderColor: "#5089ec" // 区域边框颜色
              // areaColor: {
              //   // 区域颜色
              //   type: "radial", //径向渐变
              //   x: 0.5,
              //   y: 0.5,
              //   r: 0.5,
              //   colorStops: [
              //     {
              //       // 0%处的颜色
              //       offset: 0,
              //       color: "#3f74b9"
              //     },
              //     {
              //       // 100%处的颜色
              //       offset: 1,
              //       color: "#073b7e"
              //     }
              //   ]
              // }
            },
            // 鼠标放上去的颜色
            emphasis: {
              areaColor: "#169bd5",
              borderWidth: 0
            }
          },
          scaleLimit: {
            min: 1,
            max: 15
          },
          zoom: 1,
          roam: true
        },
        // 散点系列数据
        series: [
          {
            type: "map",
            map: "china",
            geoIndex: 0,
            aspectScale: 0.75, //长宽比
            showLegendSymbol: false, // 存在legend时显示
            label: {
              normal: {
                show: true
              },
              emphasis: {
                show: false,
                textStyle: {
                  color: "#fff"
                }
              }
            },
            roam: true,
            animation: false,
            data: this.mapData
          },
          {
            type: "effectScatter",
            coordinateSystem: "geo",
            effectType: "ripple",
            showEffectOn: "render",
            rippleEffect: {
              //涟漪特效相关配置
              period: 5, //动画周期
              scale: 4, //波纹最大缩放比例
              brushType: "stroke", //波纹绘制方式 stroke | fill
              color: "#fff"
            },
            zlevel: 1,
            data: effectScatterData
          },
          {
            type: "lines",
            zlevel: 2,
            symbol: ["none", "arrow"],
            symbolSize: 10,
            lineStyle: {
              normal: {
                color: "#93ebf8",
                width: 1,
                opacity: 0.6,
                curveness: 0.2
              }
            },
            effect: {
              show: true,
              period: 3,
              trailLength: 0,
              symbol: this.planePath,
              symbolSize: 12
            },
            data: this.lineDate
          }
        ]
      }

      echarts.registerMap("china", china)

      myChart.setOption(option)
    }
  },
  created() {},
  mounted() {
    this.init()
  }
}
</script>

<style lang="scss" scoped>
.page_mine {
  display: flex;
  .mineInfo {
    position: relative;
    flex-shrink: 0;
    width: 200px;
    margin-right: 16px;
    .photograph {
      width: 100%;
      height: 240px;
      background-image: url("@/assets/images/avatar.jpg");
      background-size: cover;
      background-repeat: no-repeat;
    }
    .introduction {
      .name {
        line-height: 42px;
      }
      p {
        line-height: 1.8em;
        color: $primary_text;
        font-size: 14px;
      }
    }
    .toMessage {
      position: absolute;
      bottom: 0;
      width: 100%;
      line-height: 32px;
      color: #fff;
      background-color: #594868;
      text-align: center;
      cursor: pointer;
    }
  }
  .myChart {
    flex: 1;
  }
}
</style>
